@use 'sass:color';
@use '../css/variable.scss' as vars;

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
	// 自定义主题颜色
	$colors:
		(
			'primary': (
				'base': vars.$color-brand
			)
		),
	$font-size: ('base': vars.$font-size-small-1),
	$button-font-size: ('default': vars.$font-size-base),
	$checkbox: ('font-size': vars.$font-size-small-1),
	$input-font-size: ('default': vars.$font-size-small-1)
);

// 完整引入 Element Plus 的样式
@use 'element-plus/theme-chalk/src/index.scss' as *;

.el-rate {
	--el-rate-void-color: #{color.adjust(vars.$color-brand, $lightness: 20%)} !important;
	--el-rate-disabled-void-color: #{color.adjust(vars.$color-brand, $lightness: 20%)} !important;
	--el-rate-fill-color: #{vars.$color-brand} !important;
	height: 3.2rem;

	.el-rate__icon {
		margin-right: 0.6rem;
		font-size: vars.$font-size-large-1;
	}
}

.el-popper {
	.el-date-range-picker__content {
		padding: 1.6rem;
	}

	.el-date-range-picker__header {
		height: 2.8rem;
	}

	.el-date-table,
	.el-picker-panel__icon-btn {
		font-size: vars.$font-size-small-2;
	}

	.el-picker-panel__icon-btn {
		margin-top: 0.8rem;
	}

	.el-date-range-picker__content .el-date-range-picker__header div {
		margin-left: 5rem;
		margin-right: 5rem;
		font-size: vars.$font-size-base;
	}

	.el-date-range-picker__header-label {
		font-size: vars.$font-size-base;
		padding: 0 0.5rem;
		line-height: 2.2rem;
	}

	.el-date-table th {
		padding: 0.5rem;
	}

	.el-date-table td {
		width: 3.2rem;
		height: 3rem;
		padding: 0.4rem 0;
	}

	.el-date-table td .el-date-table-cell {
		height: 3rem;
		padding: 0.3rem 0;
	}

	.el-date-table td .el-date-table-cell .el-date-table-cell__text {
		width: 2.4rem;
		height: 2.4rem;
		line-height: 2.4rem;
	}
}

.el-input {
	line-height: 3.2rem;

	.el-input__wrapper {
		padding: 0.1rem 1.1rem;
	}

	.el-input__inner {
		height: calc(3.2rem - 2px);
		line-height: calc(3.2rem - 2px);
	}
}

.el-select {
	.el-select__wrapper {
		padding: 0.4rem 1.2rem;
		gap: 0.6rem;
		min-height: 3.2rem;
		line-height: 2.4rem;
	}

	.el-select__selection,
	.el-select__suffix {
		gap: 0.6rem;
	}

	.el-select__input {
		height: 0.24rem;
	}
}

.el-select-dropdown__list {
	padding: 0.6rem 0;

	.el-select-dropdown__item {
		padding: 0 3.2rem 0 2rem;
		height: 3.4rem;
		line-height: 3.4rem;
	}
}

.el-cascader {
	line-height: 3.2rem;

	.el-input__icon,
	.el-input--suffix .el-input__inner {
		line-height: 3.2rem;
	}

	.el-input__wrapper {
		padding: 0.1rem 1.1rem;
	}

	.el-input__inner {
		height: calc(3.2rem - 2px);
	}
}

.el-scrollbar {
	.el-cascader-menu__list {
		padding: 0.6rem 0;
	}

	.el-cascader-menu:last-child .el-cascader-node {
		padding-right: 2rem;
	}

	.el-cascader-node {
		padding: 0 3rem 0 2rem;
		height: 3.4rem;
		line-height: 3.4rem;
	}
}

.el-date-editor {
	padding: 0 1rem !important;
	height: 3.2rem !important;

	.el-icon {
		font-size: vars.$font-size-small-1;
	}

	.el-range-input {
		height: 3rem;
		line-height: 3rem;
	}

	.el-range-separator {
		padding: 0 0.5rem;
		font-size: vars.$font-size-small-1;
	}
}

.el-radio {
	height: 3.2rem;

	.el-radio__inner {
		width: vars.$font-size-small-1;
		height: vars.$font-size-small-1;

		&::after {
			width: 0.4rem;
			height: 0.4rem;
		}
	}

	.el-radio__label {
		padding-left: 0.8rem;
	}
}

.el-pagination {
	font-size: vars.$font-size-small-1;

	&.is-background .btn-prev {
		margin-left: 1.6rem;
	}

	&.is-background .btn-prev,
	&.is-background .btn-next,
	&.is-background .el-pager li {
		margin: 0 0.4rem;
	}

	button,
	.el-pager li {
		padding: 0 0.4rem;
		font-size: vars.$font-size-small-1;
		min-width: 3.2rem;
		height: 3.2rem;
		line-height: 3.2rem;
	}

	.btn-prev .el-icon,
	.el-pagination .btn-next .el-ico {
		font-size: vars.$font-size-small-2;
	}

	.el-pagination__jump,
	.el-pagination__total {
		margin-left: 1.6rem;
	}

	.el-pagination__goto {
		margin-right: 0.8rem;
	}

	.el-pagination__classifier {
		margin-left: 0.8rem;
	}

	.el-pagination__editor.el-input {
		width: 5.6rem;
	}
}

.el-popover.el-popper {
	padding: 0.5rem 0.8rem;
	border-radius: 0.4rem;
	box-shadow: 0px 0px 1.2rem rgba(0, 0, 0, 0.12);
}

.el-input-number {
	width: 15rem;
	height: 3.2rem;

	.el-input-number__decrease,
	.el-input-number__increase {
		width: 3.2rem;
	}
}
